<template>
  <fl-navBar
    dark
    :border="false"
    title="文档"
    color="#333333"
    :fixed="true"
    left-icon="left"
    background-color="#fff"
    status-bar
  />
  <!-- <view class="doc">
        <view class="doc_item">
            <navigator class="doc_item" url="/pages/docList/index" hover-class="none">
                <image src="@/static/images/doc/wendang.png" class="doc_icon" />
                <text class="doc_name">政策文件</text>
            </navigator>
        </view>
        <view class="doc_item">
            <image src="@/static/images/doc/collect.png" class="doc_icon" />
            <text class="doc_name">我的收藏</text>
        </view>
        <view class="doc_item"></view>
        <view class="doc_item"></view>
    </view> -->
  <view class="recently">
    <text class="re_name">最近</text>
    <text @tap="openFilter" class="re_filter iconfont icon-shaixuan"></text>
  </view>
  <scroll-view scroll-y @scrolltolower="scrolltolower" class="scroll_view">
    <view v-if="list.length>0" class="scroll_cont">
      <view class="cont_item" @tap="lookFile(ele)" v-for="(ele, index) in list" :key="index">
        <view class="left_icon">
          <image src="@/static/images/doc/file.png" />
        </view>
        <view class="right_news">
          <view class="file_title ellipsis">{{ ele.fileName }}</view>
          <view class="file_time">{{ ele.createTime }}</view>
        </view>
      </view>
    </view>
    <fl-empty v-else/>
    <view style="padding: 10rpx 0">
      <view class="none" v-if="isFinish">没有更多了~</view>
      <view class="loadMore" v-if="isMore">正在加载...</view>
    </view>
  </scroll-view>
  <next-tree
    :changeVerify="changeVerify"
    :title="getTitle"
    ref="nextTreeRef"
    :checkStrictly="checkStrictly"
    :selectParent="selectParent"
    :funcMode="funcMode"
    :treeData="treeData"
    labelKey="name"
    themeColor="#0d80d7"
    @cancel="oncancel"
    @clear="onClear"
    @confirm="onconfirm"
  />
</template>

<script setup>
import { ref, computed, watch } from "vue";
import modal from "@/plugins/modal";
import { onLoad } from "@dcloudio/uni-app";
import { listInfo, listTree } from "@/api/doc/index";
import { navigateBack, handleTree } from "@/utils/ruoyi";
import {viewFile} from '@/utils/common'
import store from "@/store";
import moment from "moment";
const { safeAreaInsets } = uni.getSystemInfoSync();
const { user } = store.getters;

const nextTreeRef = ref();
const funcMode = ref("radio");
const selectParent = ref(true);
const checkStrictly = ref(false);
const treeData = ref([]);

const total = ref(0);
const list = ref([]);
const isFinish = ref(false);
const isMore = ref(false);
const par = {
  pageNum: 1,
  pageSize: 10,
  year: new Date().getFullYear(),
};
async function getList() {
  const res = await listInfo(par);
  total.value = res.total;
  list.value = [...list.value, ...res.rows];
}
function openFilter() {
  nextTreeRef.value.showTree = true;
}
function lookFile(ele) {
    viewFile(ele)
}
const scrolltolower = () => {
  if (par.pageNum * par.pageSize >= total.value) {
    isFinish.value = true;
    isMore.value = false;
    return;
  }
  par.pageNum += 1;
  isMore.value = true;
  getList();
};
const reset = () => {
  isFinish.value = false;
  isMore.value = false;
  par.pageNum = 1;
  list.value = [];
  total.value = 0;
};
const getListTree = async () => {
  let par = {
    year: new Date().getFullYear(),
  };
  const res = await listTree(par);
  treeData.value = handleTree(res.data);
  console.log(handleTree(res.data));
};
function onClear() {
  par.treeId = "";
  reset();
  getList();
  nextTreeRef.value.showTree = false;
}
function onconfirm(ele) {
  par.treeId = ele[0].id;
  reset();
  getList();
}
onLoad(() => {
  getList();
  getListTree();
});
</script>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;

  .doc {
    display: flex;
    justify-content: space-between;
    margin-top: 16rpx;

    .doc_item {
      display: flex;
      width: 100%;
      height: 100%;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;

      .doc_icon {
        width: 80rpx;
        height: 80rpx;
      }

      .doc_name {
        color: #000;
        font-size: 28rpx;
        margin-top: 16rpx;
      }
    }
  }

  .recently {
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 50rpx auto 40rpx;

    .re_name {
      font-size: 32rpx;
      color: #000;
      font-weight: 700;
    }

    .re_filter {
      color: #8b8b8b;
      font-size: 35rpx;
    }
  }

  .scroll_view {
    flex: 1;
    overflow: hidden;
    height: 100%;
  }

  .scroll_cont {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 20rpx;

    .cont_item {
      display: flex;
      margin-bottom: 45rpx;

      .left_icon {
        width: 40rpx;
        height: 40rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .right_news {
        flex: 1;
        margin-left: 16rpx;

        .file_title {
          font-size: 30rpx;
          color: #000;
          line-height: 45rpx;
        }

        .file_time {
          color: #bababa;
          font-size: 24rpx;
          margin-top: 8rpx;
        }
      }
    }
  }
}
</style>
